<div class="auc-item" [style.background-image]="imageUrl" [routerLink]="['/auc-item',id]"
     (mouseover)="onMouseOver()" (mouseout)="onMouseOut()">
  <div [ngSwitch]="status" class="item-wrapper">
    <div *ngSwitchCase="0" class="status-will">
      <div class="center" [class.show]="!mouseOver">
        <div class="title">{{name}}</div>
        <div class="info">即将开拍</div>
      </div>
      <div class="fixed" [class.show]="mouseOver">
        <div *ngIf="price" class="price">起始价格<span>{{price}}¥</span></div>
        <div class="title">{{name}}</div>
      </div>
    </div>
    <div *ngSwitchCase="1" class="status-doing">
      <div class="fixed">
        <div class="price">当前竞拍价格<span>{{price}}¥</span></div>
        <div class="title">{{name}}</div>
      </div>
    </div>
    <div *ngSwitchCase="2" class="status-done">
      <div class="center" [class.show]="!mouseOver">
        <div class="info">竞拍结束</div>
        <div class="price">最终价格{{price}}¥</div>
      </div>
      <div class="fixed" [class.show]="mouseOver">
        <div *ngIf="price" class="price">成交价<span>{{price}}¥</span></div>
        <div class="title">{{name}}</div>
      </div>
    </div>
    <div *ngSwitchCase="3" class="status-fail">
      <div class="center" [class.show]="!mouseOver">
        <div class="info">流拍</div>
        <div class="price">起拍价格{{price}}¥</div>
      </div>
      <div class="fixed" [class.show]="mouseOver">
        <div *ngIf="price" class="price">起拍价<span>{{price}}¥</span></div>
        <div class="title">{{name}}</div>
      </div>
    </div>
    <div *ngSwitchDefault class="status-error"></div>
  </div>
</div>
